<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <!-- 虚拟dom复用html元素，给定不一样的key值，可以使其不复用，此处功能为了清除输入的内容 -->
    <span v-if="isUser">
        <label for="userName">用户登录：</label>
        <input id="userName" type="text" placeholder="用户名" key="k1"><br>
    </span>
    <span v-else>
        <label for="email">邮箱登录：</label>
        <input id="email" type="text" placeholder="邮箱" key="k2"><br>
    </span>
    <button @click="isUser = !isUser">切换登录方式</button>
</div>


<script src="../../js/vue.js"></script>

<script>
    const vue = new Vue({
        el: "#app",
        data: {
            message: "Hello vue,你好！",
            isUser: true
        },
        methods: {
        }
    });
</script>
</body>
</html>